<template>
    <div class="scroll-table-container">
        <table
            id="my-table"
            class="table2 scroll-table"
            width="100%"
            cellspacing="0"
            cellpadding="0"
        >
            <thead class="table-header">
                <tr class="header">
                    <th
                        v-for="_columns in columns"
                        :key="_columns.key"
                        :style="getHeaderStyle(_columns)"
                    >
                        {{ _columns.label }}
                    </th>
                </tr>
            </thead>
            <tbody class="table-tbody">
                <tr
                    v-for="(item, index) in dataSource"
                    :key="index"
                    class="row"
                >
                    <th
                        v-for="(col, clIdx) in columns"
                        :key="`${col.key + clIdx}`"
                        :style="getHeaderStyle(col)"
                    >
                        <slot
                            :name="col.key"
                            v-bind="{ row: item, $index: index }"
                        >
                            {{ getVal(item, col.key) }}
                        </slot>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import { cloneDeep } from "lodash-es";
import { getVal } from "@/utils";

export default {
    name: "ScrollTable",
    props: {
        /*
            key: string
            label: string
            width: string
        */
        columns: {
            type: Array,
            required: true,
        },
        /* 预留，暂不处理 */
        http: Function,
        params: Object,
        /* 存在 */
        dataSource: Array,
        // 当数据大于指定长度，才会去滚动
        maxLength: {
            type: Number,
            default: 9,
        },
    },
    data() {
        return {
            timer: null,
            data: [],
        };
    },
    watch: {
        dataSource: {
            handler() {
                this.data = cloneDeep(this.dataSource);
                this.$nextTick(() => {
                    if (this.data.length >= this.maxLength) {
                        document
                            .querySelector(".table-tbody")
                            .classList.add("tb");
                    } else {
                        document
                            .querySelector(".table-tbody")
                            .classList.remove("tb");
                    }
                });
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        getVal,
        getHeaderStyle(_columns) {
            return _columns.width ? `width: ${_columns.width}` : "flex: 1";
        },
    },
};
</script>

<style lang="less" scoped>
@scroll_speed: 10s;
@tr_td_height: 46px;

.scroll-table-container {
    width: 100%;
    height: 430px;

    .scroll-table {
        width: 100%;
        height: 100%;
        position: relative;

        .table-header {
            position: sticky;
            top: 0;
            z-index: 1;
            line-height: 2;
            color: #fff;
            th {
                height: @tr_td_height;
            }
            .header {
                display: flex;
                th {
                    background-color: #113e79;
                    padding-left: 10px;
                    display: flex;
                    align-items: center;
                }
            }
        }

        .table-tbody {
            color: #fff;
            width: 100%;
            display: flex;
            flex-direction: column;
            tr {
                flex: 1;
                display: flex;
                th {
                    height: @tr_td_height;
                    padding-left: 10px;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    @keyframes scroll {
        0% {
            top: 45px;
        }

        100% {
            top: -10.5%; /*该top可根据表格内容区高度自行调整，保证动画丝滑*/
        }
    }

    .scroll-table .tb {
        position: absolute;
        top: 45px;
        animation: scroll 3s linear infinite;
    }

    .table2 tbody:hover {
        animation-play-state: paused; /* 鼠标移过去就暂停滚动，松开继续滚动 */
    }
    .table2 table-tbody tr:hover {
        cursor: pointer;
        background-color: #021455;
    }
    th {
        font-size: 0.16rem;
    }
}

.scroll-table-container::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

.scroll-table-container {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
}
</style>
